<template>
    <div>
        <v-layout row wrap px-3>
            <v-flex>
                <v-btn color="success">添加品牌</v-btn>
            </v-flex>
            <v-flex xs4>
                <v-text-field
                        label="搜索"
                        @keyup.enter="loadData"
                        append-icon="search"
                        v-model="searchKey"
                ></v-text-field>
            </v-flex>
        </v-layout>

        <v-data-table
                :headers="headers"
                :items="brands"
                :pagination.sync="pagination"
                :total-items="total"
                :loading="loading"
                class="elevation-1"
        >
            <!--
            遍历数据列表
            slot="items"         指定要遍历的数据
            slot-scope="props"   给迭代数据起个别名
            -->
            <template slot="items" slot-scope="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.name }}</td>
                <td class="text-xs-center"><img :src="props.item.image"></td>
                <td class="text-xs-center">{{ props.item.letter }}</td>
            </template>
        </v-data-table>
    </div>
</template>

<script>
    export default {
        name: "myBrand",
        data() {
            return {
                searchKey: "",
                total: 0,
                brands: [],
                loading: true,
                pagination: {},
                headers: [
                    {text: 'ID', align: 'center', value: 'id'},
                    {text: '品牌名称', align: 'center', sortable: false, value: 'name'},
                    {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
                    {text: '首字母', align: 'center', value: 'letter'}
                ]
            }
        },
        watch: {
            // 分页对象
            pagination: {
                deep: true, // 深度监听
                handler() {
                    this.loadData()
                }
            }
        },
        created() {
            // 加载数据
            this.loadData()
        },
        methods: {
            loadData() {
                // 进度条
                this.loading = true;
                setTimeout(() => {
                    this.$http.get("/item/brand/page", {
                            params: {
                                key: this.searchKey,
                                page: this.pagination.page,
                                rows: this.pagination.rowsPerPage,
                                sortBy: this.pagination.sortBy,
                                desc: this.pagination.descending
                            }
                        }
                    ).then(resp => {
                        // 当前页数据
                        this.brands = resp.data.items;
                        // 总记录数
                        this.total = resp.data.total
                    }).catch((err) => {
                        // 出现异常
                        this.brands = [];
                        this.total = 0
                    });
                    // 控制进度条
                    this.loading = false
                }, 500)
            }
        }
    }
</script>

<style scoped>

</style>